<template>
  <div class="app-container">
    <div class="mt10 flex" style="width: 100%; background-color: white; align-items: center">
      <el-card shadow="never" class="table1" :body-style="{ padding: '5px 20px 5px' }">
        <!-- 材料分类 -->
        <span @click="changeMenu('one')" class="mr20 fw" :class="clickMenu === 'one' ? 'click' : ''">材料分类</span>
        <!-- 客户分类 -->
        <span @click="changeMenu('two')" class="mr20 fw" :class="clickMenu === 'two' ? 'click' : ''">客户分类</span>
        <!-- 厂商分类 -->
        <span @click="changeMenu('three')" class="mr20 fw" :class="clickMenu === 'three' ? 'click' : ''">厂商分类</span>
        <el-tree
          v-if="clickMenu === 'two' || clickMenu === 'three'"
          accordion
          class="tree mt24"
          :data="data"
          node-key="所有数据"
          @node-click="handleNodeClick"
          :props="treeProps"
          highlight-current
        />
        <el-tree v-else accordion class="tree mt24" :data="data" node-key="所有数据" :props="defaultProps" @node-click="handleNodeClick" />
      </el-card>

      <!-- 中间箭头 -->
      <!-- TODO: 没接口 -->
      <!-- <el-card shadow="never" :body-style="{ padding: '5px 30px 5px 0px' }">
            <div class="flex" style="flex-direction: column; justify-content: center;">
                <el-button type="primary" size="default" @click="moveTree('up')" class="ml12" style="width: 40px;">
                    <span class="svg-container">
                        <svg-icon name="ele-Top" style="color: white; font-size: 22px;" />
                    </span>
                </el-button>
                <el-button type="primary" size="default" @click="moveTree('done')" class="ml12 mt30" style="width: 40px;">
                    <span class="svg-container">
                        <svg-icon name="ele-Bottom" style="color: white; font-size: 22px;" />
                    </span>
                </el-button>
            </div>
        </el-card> -->
      <!-- 右边 -->
      <el-card shadow="never" :body-style="{ padding: '5px 20px 5px' }">
        <el-card shadow="never" :body-style="{ padding: '0px' }">
          <el-form ref="form" label-width="120px" :inline="false">
            <el-form-item label="分类编码" class="f14">
              <el-input v-model="addDepartmentalDat" placeholder="请输入分类编码" />
            </el-form-item>

            <el-form-item label="分类名称" class="f14">
              <el-input v-model="addDepartmentCode" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item label="" class="f14">
              <div class="flex">
                <el-button @click="ClickOne('add')" style="background-color: #f89027; width: 60px" type="warning" size="small">增加</el-button>
                <el-button style="background-color: #f89027; width: 60px" type="warning" size="small" @click="ClickOne('del')">删除</el-button>
              </div>
            </el-form-item>
            <el-form-item label="分类编码" class="f14">
              <el-input v-model="DepartmentalDat" disabled />
            </el-form-item>

            <el-form-item label="分类名称" class="f14">
              <el-input v-model="DepartmentCode" disabled />
            </el-form-item>

            <el-form-item v-if="clickMenu === 'one'" label="备注" class="f14">
              <el-input v-model="remark" disabled />
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '25px 0px 0px' }" v-if="clickMenu === 'one'">
          <div slot="header" class="f16 tree mb18">
            <span style="font-weight: 600">主辅料定义</span>
          </div>
          <el-form ref="form" label-width="120px" :inline="false">
            <el-form-item label="分类编码" class="f14">
              <el-input v-model="DepartmentalDat" placeholder="请输入分类编码" disabled />
            </el-form-item>

            <el-form-item label="分类名称" class="f14">
              <el-input v-model="DepartmentCode" placeholder="请输入分类名称" disabled />
            </el-form-item>

            <el-form-item label="主辅料" class="f14">
              <el-select v-model="department" placeholder="主辅料" @change="changeDepartment" :disabled="disabledDepartment">
                <el-option v-for="item in DepartmentType" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>

            <el-form-item label="通用" class="f14">
              <el-select v-model="remark" @change="changeDepartment">
                <el-option v-for="item in Universal" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import service from '@/utils/request'
import LoginWork from '@/utils/LoginWork'
import { ElMessage, ElMessageBox } from 'element-plus'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'Classify'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted, watch } from 'vue'
import { AllDepartmentData, type AllDepartments } from '@/api/GeneralManager/SystemManagement/DepartmentInformation'
const treeProps = {
  children: 'list',
  label: 'typeName'
}
const clickMenu = ref('one')
const changeMenu = (type: string) => {
  clickMenu.value = type
  if (type === 'one') {
    DepartmentalData(0)
  }
  if (type === 'two') {
    DepartmentalData(1)
  }
  if (type === 'three') {
    DepartmentalData(2)
  }
}
//获取所有部门资料
onMounted(() => {
  DepartmentalData(0)
})
const DepartmentalData = async (choose: number) => {
  let resolve = []
  if (choose === 0) {
    resolve = await service.get<any, any>('/material/mtl/property/mtlPropertyListTree')
  } else {
    resolve = await service.get<any, any>(`/material/mtl/property/sdCustTypeAVen?choose=${choose}`)
  }
  data.value = resolve
}

interface Tree {
  children?: Tree[]
  levelCode: string
  oldLevel: string
  parentLevel: string
  typeName: string
  typeNo: string
  mtlProperty: string
  remark: string
  sizeFlag: string
}

const data = ref<any>([])

// 部门代码
const DepartmentCode = ref<string>('')

// 部门资料
const DepartmentalDat = ref<string>('')
const remark = ref('')
// 部门类型
const DepartmentType = ref([
  { id: 'P', name: '冲裁主料' },
  { id: 'M', name: '冲裁辅料' },
  { id: 'J', name: '针车辅料' },
  { id: 'Z', name: '' }
])
// 通用
const Universal = ref([{ name: '通用' }, { name: '' }])

const currentNode = ref()
const handleNodeClick = async (data: Tree) => {
  console.log(data)

  currentNode.value = data
  let { typeName, typeNo, levelCode, parentLevel, mtlProperty } = data
  if (parentLevel !== null && parentLevel.length === 2) {
    disabledDepartment.value = false
  } else {
    disabledDepartment.value = true
  }
  DepartmentalDat.value = typeNo
  DepartmentCode.value = typeName
  department.value = mtlProperty
  remark.value = data.remark
  // DepartmentCodeEn.value = res.engTypeName
  // if (res.sizeFlag === "Y") {
  //     sizeFlag.value = true
  // } else {
  //     sizeFlag.value = false
  // }
  // let departmentName = findNameById(DepartmentType.value, deptFlag!)
  // department.value = departmentName

  // let accountingName = findNameById(AccountingType.value, totalFlag!)
  // businessAccounting.value = accountingName
}

// 生产
const defaultProps = {
  children: 'children',
  label: 'typeName'
}
// 收集部门类型数据
const department = ref<string>('')
// 领用单位
const businessAccounting = ref<string>('')
// 分类英文名称
// const DepartmentCodeEn = ref('')
// 分码
// const sizeFlag = ref<any>(false)
const changeDepartment = async () => {
  let { typeName, typeNo, levelCode, parentLevel } = currentNode.value
  ElMessageBox.confirm('是否修改？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      // if (sizeFlag.value === true) {
      //     sizeFlag.value = "Y"
      // } else {
      //     sizeFlag.value = " "
      // }
      let res = await LoginWork.post<any, any>('/material/mtl/property/updateSdMtlTypeNew', {
        children: currentNode.value.children || null,
        yfMtlTypeNew: '', //	yfMtlTypeNew
        // drawDept: businessAccounting.value,//	领用部门
        // engTypeName: DepartmentCodeEn.value,//	英文分类名称
        levelCode, //	子节点
        mtlProperty: department.value, //	主辅料
        oldLevel: '', //
        oldParentLevel: '', //
        parentLevel, //	父节点
        remark: remark.value, //	备注
        // sizeFlag: sizeFlag.value,//	分码 默认空 Y是√
        typeName, //	种类名称
        typeNo //	种类代码
      })
      if (res.code === 200) {
        JMessage.success('修改成功')
        DepartmentalData(0)
      }
      // if (sizeFlag.value === "Y") {
      //     sizeFlag.value = true
      // } else {
      //     sizeFlag.value = false
      // }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改'
      })
      handleNodeClick(currentNode.value)
    })
}
// 判断下拉框是否禁用
const disabledDepartment = ref(true)

// 添加和删除
const addDepartmentalDat = ref('')
const addDepartmentCode = ref('')

const ClickOne = async (val: any) => {
  const regex = addDepartmentalDat.value.match(/^[A-Z]{1}\w+/g)
  if (val === 'add') {
    if (addDepartmentalDat.value === '' && addDepartmentCode.value === '') {
      JMessage.warning('不能添加空数据')
    } else if (addDepartmentalDat.value === '' || addDepartmentCode.value === '') {
      JMessage.warning('分类编码和分类名称不能为空')
    } else if (!regex) {
      JMessage.warning('检查分类编码格式是否正确')
    } else {
      const levelCode = currentNode.value ? currentNode.value.levelCode : ''
      // console.log(currentNode.value);
      if (clickMenu.value === 'one') {
        const res = await LoginWork.post<any, any>(
          `/material/mtl/property/insertSdMtlTypeNew?typeNo=${addDepartmentalDat.value}&typeName=${addDepartmentCode.value}`,
          {
            ...currentNode.value,
            typeName: addDepartmentCode.value,
            typeNo: addDepartmentalDat.value
          }
        )
        DepartmentalData(0)
        if (res.code === 200) JMessage.success('添加成功')
        else JMessage.error(res.message)
      }
      if (clickMenu.value === 'two') {
        const res = await LoginWork.post<any, any>(`/material/mtl/property/insertSdCustType?parentLevel=${levelCode}&choose=${1}`, {
          ...currentNode.value,
          typeName: addDepartmentCode.value,
          typeNo: addDepartmentalDat.value
        })
        DepartmentalData(1)
        if (res.code === 200) JMessage.success('添加成功')
        else JMessage.error(res.message)
      }
      if (clickMenu.value === 'three') {
        const res = await LoginWork.post<any, any>(`/material/mtl/property/insertSdCustType?parentLevel=${levelCode}&choose=${2}`, {
          ...currentNode.value,
          typeName: addDepartmentCode.value,
          typeNo: addDepartmentalDat.value
        })
        DepartmentalData(2)
        if (res.code === 200) JMessage.success('添加成功')
        else JMessage.error(res.message)
      }

      addDepartmentCode.value = ''
      addDepartmentalDat.value = ''
    }
  }
  if (val === 'del') {
    if (clickMenu.value === 'one') {
      const res = await LoginWork.post<any, any>(`/material/mtl/property/deleteSdMtlTypeNew`, currentNode.value)
      DepartmentalData(0)
      if (res.code === 200) JMessage.success('删除成功')
    }
    if (clickMenu.value === 'two') {
      const res = await LoginWork.post<any, any>(`/material/mtl/property/deleteSdCustOrVen?choose=${1}`, currentNode.value)
      DepartmentalData(1)
      if (res.code === 200) JMessage.success('删除成功')
    }
    if (clickMenu.value === 'three') {
      const res = await LoginWork.post<any, any>(`/material/mtl/property/deleteSdCustOrVen?choose=${2}`, currentNode.value)
      DepartmentalData(2)
      if (res.code === 200) JMessage.success('删除成功')
    }

    // if (res.code === 504) {
    //     JMessage.warning(res.message)
    // } else {
    //     JMessage.success(res.message)
    // }
  }
  return
}

// 树结构上下移动
const moveTree = async (val: string) => {
  if (val === 'up') {
    await service.get('/MaterialManagement/getAssortUMoveUp', {
      params: {
        typeNo: DepartmentalDat.value
      }
    })
    JMessage.success('上移成功')
  } else {
    await service.get('/MaterialManagement/getAssortUMoveDown', {
      params: {
        typeNo: DepartmentalDat.value
      }
    })
    JMessage.success('下移成功')
  }
  // DepartmentalData()
}
</script>
<style lang="less" scoped>
.fw {
  font-weight: 600;
}

.click {
  color: #f89027;
  border-bottom: 2px solid #f89027;
}

.table1 {
  .tree {
    width: 200px;
    border: 1px solid gray;
    height: calc(100vh - 210px);
  }
}

:deep(.is-current) {
  background-color: #f5f7fa;

  .el-tree-node:focus > .el-tree-node__content {
    color: #f89027;
  }
}

:deep(.is-current > .el-tree-node__content:nth-child(1)) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

:deep(.el-select .el-input__wrapper) {
  width: 180px;
}
</style>
